Patti HTML v1.2

Premium HTML Template

created: 01/26/2014
latest update: 28 June 2015
by: DeliciousThemes
themeforest.net/user/DeliciousThemes
email: deliciousthemes@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email me via my user page contact form. Thanks so much!

Patti is a One Page HTML template, designed and developed by and for creative people. It`s packed with the Revolution Slider jQuery plugin, which generates the 3 types of sliders used inside it: fullscreen slider, fullwidh slider and fullscreen video slider. The template also features a grid based fullwidth gallery for portfolio, perfect to showcase your projects.

All html pages are named so you know what page it is.

color-schemes - styles and images for each color scheme
css - styles for PrettyPhoto, SubNavigation Menu, icon-font, audioplayer and responsive layout
fonts - the icon font
images - images used in the template. The Folder includes main images used in html layout, but also some subfolders:
- portfolio - keeps thumbnails used for portfolio items
- blog - keeps thumbnails used for blog items
- slides - keeps thumbnails used for sliders
- prettyPhoto - keeps images used for the lightbox
js - javascript files folder
media - media files folder for blog audio player and fullscreen video slider
php - php files folder
rs-plugin - this plugin holds the jQuery Revolution plugin
twitter - it holds Twitter settings for your Twitter app
style.css - holds the styling code of the template

This template is based on a fixed layout and built using HTML5.

The files which contains all the HTML structure are the ones with the .html suffix.

You can change the text from the template by navigating through each file and locate each line of text you want to change.

To change the logo, for example, open each html page, locate the line which contains the address to the current logo(images/logo.png) and change it with the address of your own logo.

Headers

Since version 1.1, Patti has 3 header styles for the initial state(not scrolled): solid header(class: solid-header), transparent header(class: transparent-header) and no header(no-header). To set one, use its class near the header id:

<header id="header" class="solid-header">

How to Set Up the Main menu

The main menu is located inside each html file and looks like this:

<ul id="mainnav" class="sf-menu">
      <li class="current"><a href="index.html/#hello"><span>HELLO</span></a></li>
      <li><a href="index.html#about"><span>ABOUT</span></a></li>
      <li><a href="index.html#work"><span>WORK</span></a></li> 
      <li><a href="index.html#services"><span>SERVICES</span></a></li>
      <li><a class="external" href="elements.html"><span>EXTRA</span></a></li>
      <li><a href="index.html#contact"><span>CONTACT</span></a></li>
</ul>

As you can notice, there are some special classes used inside the menu:

- current - this class is used for the li element and makes the menu item highlighted.

- external - this class is used to indicate an external link, which doesn`t belong to the click-and-scroll menu functionality. Use it everytime you have an outside page.

To create a scrolling menu element, you need to use an URL which contains an link to a section from the page, identified by an ID. For example: index.html#about will scroll down to "About" section. Make sure to set the id to the About section, like this: <section id="about">

How to Open an Image in a Lightbox with PrettyPhoto

The template is making use of the lightbox plugin called PrettyPhoto. The plugin can open a big image of a thumbnail or create a gallery of images.

Here`s an example of an image which will open in a lightbox:

<a href="images/portfolio/image1.jpg" rel="prettyPhoto" title="Lorem Ipsum Dolor Sit Amet">
		<img src="images/portfolio/image1-small.jpg" alt="Image Title">
</a>

You can create a gallery by adding more items and adding [pp_gal] after prettyPhoto:

<a href="images/portfolio/image1.jpg" rel="prettyPhoto[pp_gal]" title="Lorem Ipsum Dolor Sit Amet">
		<img src="images/portfolio/image1-small.jpg" alt="Slide 1">
</a>

<a href="images/portfolio/image2.jpg" rel="prettyPhoto[pp_gal]" title="Consectetur Adipiscing Elit">
		<img src="images/portfolio/image2-small.jpg" alt="Slide 2">
</a>

How to Set Up the Homepage Slider

The slider is based on RevolutionSlider and it comes in 3 modes: fullScreen Image Slider, fullWidth Image Slider and fullScreen Video Slider

To generate each slide, you need to use specific classes for the container:

1. FullScreen Image slider:

<div class="fullscreenbanner-container">
<div class="fullscreenbanner">

2. FullWidth Image Slider

<div class="fullwidthbanner-container">
<div class="fullwidthbanner">

3. FullScreen Video Slider

<div class="videobanner-container">
<div class="videobanner">

The video files are located inside "media/" folder. Make sure to provide more formats for the video, in order to make it compatible with as many devices as possible. Suggested formats are mp4, ogv and webm.

For more info about the slider, please check out the "Revolution Slider documentation by ThemePunch" folder from "Documentation".

How to Set Up the Homepage Portfolio

The homepage portfolio uses a masonry layout and each portfolio thumbnail can have 4 sizes: small thumbnail(identified by "item-small" class), wide thumbnail(identified by "item-wide" class), high thumbnail("item-high" class) and long thumbnail("item-long" class).

For best results, use images bigger than or at least 540x420px.

The thumbnail images are located inside the "portfolio" folder from "images".

The portfolio can be filterable or not. To make it not filterable, remove the list with the id "filters" from the page. You can assign a category to an item element, so it can be sorted. Just follow the pattern used inside the portfolio section.

Portfolio Item Pages (Inner Portfolio Pages)

Patti comes with 5 portfolio inner pages. You can locate them by "portfolio-item-x.html".

Each one of them has a custom layout, in order to give you the flexibility to create unique project pages.

They are flexible, because we`re talking here about HTML code, meaning that you can modify them as you wish.

For example, portfolio-item-3.html contains a slider. To add another image to the slider, just follow the pattern.

<div class="slider-item">

<a href="images/portfolio/p1.jpg" title="Image Gallery 1" rel="prettyPhoto[pp_gal]"><img src="images/portfolio/p1.jpg" alt="Picture 1" /></a>

</div>

Parallax Backgrounds

You can set parallax backgrounds for sections. The changes you need to make in order to obtain a parallax background are located at HTML, CSS and jQuery levels.

1. HTML

You need to give to your section the "parallax-section" class and another class or ID for individualizing it. You can also set a transparent cover for it(using a div with classes "darker-overlay" or "lighter-overlay"). For example, the HTML section for the quote looks like this:

<section class="parallax-section" id="quote">
    <div class="darker-overlay"> 
        <section class="centered-wrapper">
            <div class="double-space"></div>

                <h2 class="parallax-quote">"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."</h2> 
                <span class="quote-author">Antoine de Saint-Exupéry</span>

                <div class="double-space"></div>
            </section> 
      </div>
</section>

2. CSS

Now you need to assign to your section a background image. You have to do it with CSS. The quote section uses this code to assign it:

#quote {
    background:url(images/parallax-quote.jpg) 50% 0 repeat-y fixed;
}

3. jQuery

Last step is to assign the ID or class to the Parallax script mechanism using jQuery. You can add it inside "js/custom.js" at "Parallax Sections". The code for the quote section looks like this:

$('#quote').parallax("50%", 0.4);

The options are:

Position - Horizontal position of the element(50%).

Inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling.

This is how you can set a parallax section properly.

Icons

Patti template is making use of an icon font called FontAwesome. Basically, they are characters of a font, therefore, it will beautifully scale for any type of mobile device.

The list of all icons can be found at http://fontawesome.io/

To integrate one in a page, use this code format:

<i class="fa fa-camera-retro"></i>

style.css - Main stylesheet which includes all the styles of the template. It is located in the root folder of the template.

prettyPhoto.css, superfish.css, audioplayer.css, fontawesome.css, animate.css, owl.carousel.css - Stylesheets which include the styles for custom plugins and icon font. They are located inside the "css" folder.

responsive.css - Stylesheet which includes the styles for the responsive layout. It located inside the "css" folder. If you want to see how the layout is changing its shape on different devices, open the live demo on your browser(ideally Chrome) and resize the browser window.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

How to Change the Color Scheme of the Template

The template comes in 6 color schemes: yellow, orange, blue, green, red, purple.

The current theme is set to orange. The code for it is located in every html page, inside the <head> </head> section:

<link rel="stylesheet" type="text/css" href="color-schemes/orange/orange.css" media="screen" />

Change orange from the above line with other color from the list and the template will import the styles for the respective color. For example:

<link rel="stylesheet" type="text/css" href="color-schemes/blue/blue.css" media="screen" />

How to use Animations

You can add animations to any HTML block. As you already noticed in the live demo, there are some animations which reveal each element while you scroll down the page.

For example, each team member are revealed from bottom to top in a fading effect. The code for a team member is:

<div class="percent-one-third box fadeInDown">
    <div class="team-member">
          team member details
    </div><!--end team-member--> 
</div><!--end one-third-->

The things that make the box animated are the classes box and fadeInDown.

So, everytime you want to animate an element, you have to add to it the class box and the class for the effect. The entire list of effects can be found at http://daneden.github.io/animate.css/

Javascript - jQuery files used within the template:

jquery-1.10.2.min.js - Jquery is a JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. The template is using the library hosted by google, for faster loading of the webpage.
js/hoverIntent.js - HoverIntent is A jQuery plugin which gives advanced hover options.
js/jflickrfeed.js - jFlickrFeed is setting up a Flickr Feed from any Flickr ID
js/owl.carousel.min.js - OwlCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order.
js/jquery.prettyPhoto.js - PrettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax
js/jquery.contact.js - The code is animating the contact form when is used.
twitter/jquery.tweet.min.js - Tweet is a jquery plugin which shows a feed from a twitter account
js/superfish.js - Superfish is a plugin which creates beautiful drop down menus.
js/jack-in-the-box.js - J ackInTheBox - Reveal CSS animation as you scroll down a page.
js/jquery.countTo.js - CountTo - A jQuery plugin that will count up (or down) to a target number at a specified speed.
js/jquery.fitvids.js - FitVids - a jQuery plugin for fluid width video embeds
js/jquery.nav.js - One Page Nav - Smooth scrolling and smart navigation when user scrolls on one-page sites.
js/jquery.parallax.js - Parallax - jQuery Parallax is a script that simulates the parallax effect.
js/jquery.scrollTo.js - ScrollTo - helper for scrolling plugins
js/smoothScroll.js - SmoothScroll - a plugin for smooth page scrolling
js/waypoints.min.js - Waypoints - Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.
js/jquery.isotope.min.js - Isotope is used for gallery, blog and portfolio filtering and layout. Super strong plugin.
js/jquery.jplayer.min.js - jPlayer lets you use audio files on the website by presenting them in a nice player.(see blog)
rs-plugin/js/jquery.themepunch.revolution.min.js - Revolution Slider is the plugin used for homepage sliders.
js/custom.js - Implementation of the plugins listed above and custom javascript functionality code.

How to Set Up the Flickr Feed

To set up the flickr feed, locate the flickr code from custom.js:

// Flickr Widget
$('#flickr').jflickrfeed({
    limit: 10,
    qstrings: {
        id: '58842866@N08',
        tags: 'architecture'
    },
    itemTemplate: 
        '<li>' +
            '<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
        '</li>' 
});

Change the current flickr ID with the one you want. If you don`t know which is your Flickr ID, check out this tool: http://idgettr.com/.

How to Set Up the Twitter Feed

To set up the twitter feed, you need to create a twitter app. Head over to http://dev.twitter.com and create one. I suggest you to follow this video tutorial, which explains how to do it: http://www.youtube.com/watch?v=xqSp7060Gj0

This step is mandatory, because Twitter changed their API and making use of Twitter content without any tracking(consent) is not possible anymore.

Once you created a Twitter app, you need to open the index.php file from "twitter/" folder from Patti template and use your keys for the variables from inside the file:

   // Your Twitter App Consumer Key
private $consumer_key = 'yourconsumerkey';

// Your Twitter App Consumer Secret
private $consumer_secret = 'yourconsumerappsecret';

// Your Twitter App Access Token
private $user_token = 'youraccesstoken';

// Your Twitter App Access Token Secret
private $user_secret = 'youraccesstokensecret';

Now go to "js/custom.js" and locate: username: "deliciousthemes",

Replace the username with your own Twitter username.

Once you set up those variables, you can now use the html block: <div class="tweet"></div> to generate a twitter feed list.

How to Set Up the Google Maps Widget

Patti template has integrated a Google Map inside the Contact section of the homepage. This map is generated by the next HTML code:

<!-- GOOGLE MAP CONTROLS -->
<a class="button-map close-map"><span>Locate Us on Map</span></a>
<div id="google_map"></div>

In order to edit the map and customize it to your own location, open "js/custom-map.js".

You need to use a set of coordinates. I used this set: 37.422117,-122.084053 . The coordinates appear for 3 times inside the file, so make sure to replace all 3 instances with your own coordinates.

After that, you can customize the tooltip with your own text. Locate this code:

var contentString = '<div class="map-tooltip">'+
'<h6>Patti Headquarters</h6>'+
'<p>Now that you visited our website, how about <br/> checking out our office too?</p>'+
'</div>';

...and replace the content with your own.

That`s it! The map should use your details from now.

Very Important:

If you get rid of the <div id="google_map"></div> code from your HTML page, make sure to delete the scripts related to google map from the bottom of the HTML page:

Otherwise, the page will get broken.

The template makes use of 1 php file, located inside the "php" folder.

contact.php

To receive emails, the entire template needs to be uploaded to a server which supports either PHP4 or PHP5.

How to Set up the contact form

To set up the contact form to send emails with the persons which are contacting you, open "contact.php" file and change the email from line 42 with your own email.

$address = "example@example.net";

I've included one PSD files with this template:

patti.psd

The PSD file reflects the image of the homepage template, therefore, it would be very easy for you to change something in it.

jQuery - http://jquery.com/
jQuery Slider Revolution - http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
jQuery HoverIntent - http://cherne.net/brian/resources/jquery.hoverIntent.html
jQuery jFlickrFeed - http://www.gethifi.com/blog/a-jquery-flickr-feed-plugin
jQuery OwlCarousel - http://owlgraphic.com/owlcarousel/
jQuery PrettyPhoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
jQuery Isotope - isotope.metafizzy.co
jQuery jPlayer - http://jplayer.org/
jQuery Tweet - http://tweet.seaofclouds.com/
jQuery Superfish - http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery Waypoints - https://github.com/imakewebthings/jquery-waypoints
jQuery CountTo - https://github.com/mhuggins/jquery-countTo
jQuery FitVids - http://fitvidsjs.com/
jQuery Nav - http://github.com/davist11/jQuery-One-Page-Nav
jQuery Parallax - https://github.com/IanLunn/jQuery-Parallax
jQuery ScrollTo - https://github.com/flesler/jquery.scrollTo
SmoothScroll - https://gist.github.com/galambalazs/6477177
Modernizr - http://modernizr.com/

Font Awesome - fortawesome.github.com/Font-Awesome/
Open Sans Font - http://www.google.com/webfonts/specimen/Open+Sans
Audio Files - http://www.youtube.com/watch?v=GgR6dyzkKHI
Video Files - http://www.beachfrontbroll.com/
Images - http://unsplash.com/

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.

Madalin Tudose, DeliciousThemes.com

V1.2 - 28 June, 2015

Updated prettyPhoto lightbox library to v3.1.6 to keep it safe from any security vulnerabilities

Files affected:

js/jquery.prettyPhoto.js

V1.1 - 06 February, 2014

Added 2 more header styles for the initial state: transparent and hidden
Added "Clients" section
Replaced the homepage slider caption image with HTML markup
Added a Captcha Field to Contact Form

Files affected:

all HTML files
js/custom.js
js/custom-isotope.js
js/jquery.contact.js
style.css
css/responsive.css
php/contact.php
images/ folder - added clients/ folder

How to update the template without affecting your current customization progress:

The update contains mainly new features added to the version 1.0.

The changes which occured in HTML files are:

- a class added to the header:

<header id="header" class="solid-header">

- a new field added to the contact form:

<input name="verify" placeholder="3+1 = ?" type="text" id="verify" value="" />

- HTML caption for the slider instead of the initial image caption:

<div class="caption tp-resizeme big-text lft ltt"  
    data-x="center" 
    data-y="center" 
    data-speed="300" 
    data-start="500" 
    data-easing="easeOutExpo">
         <h1>We Are Patti Studio</h1>
         <div class="fancy-caption" style="width: 365px">
             <div class="fancy-slider-info">Since 2008</div>
         <div class="fancy-slider-caption">Serving Web Design</div>
         </div>
</div>

Unless you didn`t alter any other files except HTML files, you can replace the files mentioned above(Files Affected:) except the HTML files too, with the ones from V1.1.

If you modified any of the mentioned files above and don`t want to mess up your changes, you can contact me via email at deliciousthemes@gmail.com and I`ll be happy to assist you!

V1.0 - 31 January, 2014

Launch Date

Patti HTML v1.2

Premium HTML Template

Intro

Files and Folders

HTML

Headers

How to Set Up the Main menu

How to Open an Image in a Lightbox with PrettyPhoto

How to Set Up the Homepage Slider

How to Set Up the Homepage Portfolio

Portfolio Item Pages (Inner Portfolio Pages)

Parallax Backgrounds

Icons

CSS

How to Change the Color Scheme of the Template

How to use Animations

JavaScript

How to Set Up the Flickr Feed

How to Set Up the Twitter Feed

How to Set Up the Google Maps Widget

Very Important:

PHP

How to Set up the contact form

PSD Files

Sources and Credits

Thank you!

Changelog

How to update the template without affecting your current customization progress:

Patti HTML v1.2

Premium HTML Template

Intro

Files and Folders

HTML

He​aders

How to Set Up the Main menu

How to Open an Image in a Lightbox with PrettyPhoto

How to Set Up the Homepage Slider

How to Set Up the Homepage Portfolio

Portfolio Item Pages (Inner Portfolio Pages)

Parallax Backgrounds

Icons

CSS

How to Change the Color Scheme of the Template

How to use Animations

JavaScript

How to Set Up the Flickr Feed

How to Set Up the Twitter Feed

How to Set Up the Google Maps Widget

Very Important:

PHP

How to Set up the contact form

PSD Files

Sources and Credits

Thank you!

Changelog

How to update the template without affecting your current customization progress:

Headers